<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <h1>{{ from1 }}</h1>
        <h4>{{ from2 }}</h4>
        <input type="text" v-model.trim="name"><br>
        <input type="text" v-model.number="age"><br>
        <input type="text" v-model.lazy="adress"><br>
        <button type="submit" class="in">提交</button>
        <button type="submit" class="reset">重置</button>

        <hr>
        <v2></v2>
        <!-- 各个组件作用域不同，互不影响 -->
        <hr>
        <abc></abc>

        <hr>
        <v3></v3>
    </div>
</template>



<script>
import v2 from './02语法.vue'
import v3 from './03v-model1选框.vue'

export default {
    name: "APP",
    components: {
        v2,   //组件注册
        v3,
    },


    data() {
        return {
            from1: "个人信息页面",
            from2: "请输入你的个人信息",
            name: 'cililin',
            age: '20',
            adress: '佛山'
        }
    }
}

</script>

<style>
.in {
    margin-left: 15px;
}


.reset {
    margin-left: 50px;
    margin-top: 5px;
}
</style>